<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="实时信息" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <view class="list-card" v-for="(item,index) in dataList" :key="index+'p'">
        <view class="list-title">
          <i class="icon"></i>
          <text class="txt">{{item.name}}</text>
        </view>

        <uni-row class="row-list" :gutter="4" v-if="item.list">
          <uni-col :span="8" class="col-item" v-for="(it,inx) in item.list" :key="inx+'ch'">
            <view class="lab-b">
              <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="lab">{{it.t}}:</text>
            </view>
            <view class="val">{{it.c}}</view>
          </uni-col>
          
        </uni-row>
      </view>

    
    </view>
  </view>
</template>

<script>
import { getPowerSupplySystem } from '@/api/monitorCenter/index.js';

export default {
  data() {
    return {
      data1: {},
      data2: {},
      data3: {},
      data4: {},
      data5: {},
      configs: [
        { name: '开闭所/ 3.2米提升机回路', prefix: 't_240' },
        { name: '开闭所/ 4#箱变', prefix: 't_250' },
        { name: '开闭所/ 翻线柜107', prefix: 't_260' },
        { name: '开闭所/ 2#风机变压器', prefix: 't_270' },
        { name: '开闭所/ 4米提升机二回路', prefix: 't_280' },
        { name: '开闭所/ 3#箱变', prefix: 't_290' },
        { name: '开闭所/ 2#矿变', prefix: 't_300' },
        { name: '开闭所/ 2#开闭所I段电源', prefix: 't_310' },
        { name: '开闭所/ 1#电源', prefix: 't_230' }
      ],
      data6: {},
      data7: {},
      data8: {},
      data9: {},
      data10: {},
      dataList: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data, code } = await getPowerSupplySystem();
      if (code !== 200) return;
      this.data1 = this.generateDataObject(this.configs[0], data);
      this.data2 = this.generateDataObject(this.configs[1], data);
      this.data3 = this.generateDataObject(this.configs[2], data);
      this.data4 = this.generateDataObject(this.configs[3], data);
      this.data5 = this.generateDataObject(this.configs[4], data);
      // this.data6 = this.generateDataObject(this.configs[4], data);
      // this.data7 = this.generateDataObject(this.configs[5], data);
      // this.data8 = this.generateDataObject(this.configs[6], data);
      // this.data9 = this.generateDataObject(this.configs[7], data);
      // this.data10 = this.generateDataObject(this.configs[8], data);

      for (var i = 0; i < 5; i++) {
        let dataname = `data${i + 1}`;
        this.dataList.push(this[dataname]);
      }
    },
    generateDataObject(config, data) {
      const { name, prefix } = config;
      return {
        name,
        list: [
          { t: 'Ia(A)', c: data[`${prefix}001`] },
          { t: 'Ib(A)', c: data[`${prefix}002`] },
          { t: 'Ic(A)', c: data[`${prefix}003`] },
          { t: 'I0(V)', c: data[`${prefix}004`] },
          { t: 'Uab(KV)', c: data[`${prefix}005`] },
          { t: 'Ubc(V)', c: data[`${prefix}006`] },
          { t: 'Uca(V)', c: data[`${prefix}007`] },
          { t: 'U0(V)', c: data[`${prefix}008`] },
          { t: 'UAN(V)', c: data[`${prefix}009`] },
          { t: 'UBN(V)', c: data[`${prefix}010`] },
          { t: 'UCN(V)', c: data[`${prefix}011`] },
          { t: '频率(Hz)', c: data[`${prefix}012`] },
          { t: '有功功率(KW)', c: data[`${prefix}013`] },
          { t: '无功功率(KW)', c: data[`${prefix}014`] },
          { t: '功率因数', c: data[`${prefix}015`] }
        ]
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 32rpx;
    margin-bottom: 40rpx;
  }

  .list-card {
    width: 100%;
    height: 400rpx;
    background: url('/static/images/monitor/gd-list-card.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 40rpx;

    .list-title {
      height: 62rpx;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      padding: 0 20rpx;
      .icon {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #ffffff;
      }
      .txt {
        padding-left: 10rpx;
      }
    }

    .row-list {
      padding: 12rpx 12rpx 4rpx;
      .col-item {
        font-size: 24rpx;
        display: flex;
        padding-bottom: 30rpx;
      }
      .lab-b {
        .icon {
          width: 22rpx;
          height: 13rpx;
        }

        .lab {
          padding-left: 5rpx;
          color: rgba(16, 44, 89, 0.5);
        }
      }
      .val {
        color: rgba(16, 44, 89, 1);
      }
    }
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0 0 28rpx 0;
}
</style>
